<template>
    <div style="width: 100%" v-loading="loading">
        <div class="orderMillSearch">
            <el-form :inline="true" ref="form">

                <el-form-item label="订单号" style="margin-left: 100px;">
                    <el-input v-model="order_sn" placeholder="请输入手机号码"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handelSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>
        </div>
        <div class="orderMillTable">
            <el-table
                    :data="list"
                    border
                    style="width: 1501px">

                <el-table-column
                        align="center"
                        prop="order_sn"
                        label="	订单号"
                        width="180">
                </el-table-column>

                <el-table-column
                        width="120px"
                        align="center"
                        prop="name"
                        label="收货人">
                </el-table-column>

                <el-table-column
                        width="350px"
                        align="center"
                        prop="address"
                        label="收货地址">
                    <template slot-scope="scope">
                        {{
                        scope.row.province_name+scope.row.city_name+scope.row.district_name+scope.row.address !==0 ?
                        scope.row.province_name+scope.row.city_name+scope.row.district_name+scope.row.address:''
                        }}
                    </template>
                </el-table-column>

                <el-table-column
                        width="100px"
                        align="center"
                        prop="goods_price"
                        label="商品价格">
                </el-table-column>

                <el-table-column
                        width="130px"
                        align="center"
                        prop="pay_amount"
                        label="支付价格">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="pay_type"
                        label="支付方式"
                        width="120">
                    <template slot-scope="scope">
                        {{
                        scope.row.pay_type === 1 ?
                        '微信支付'
                        :
                        scope.row.pay_type === 2 ?
                        '支付宝支付'
                        :
                        scope.row.pay_type === 3 ?
                        '银行卡支付'
                        :
                        '未选择支付方式'
                        }}
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="pay_time"
                        label="支付时间"
                        width="200">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="status"
                        label="支付状态"
                        width="120">
                    <template slot-scope="scope">
                        {{
                            scope.row.status === 0 ? '待付款'
                            :
                            scope.row.status === 1 ? '待付款'
                            :
                            scope.row.status === 2 ? '待发货'
                            :
                            scope.row.status === 3 ? '待收货'
                            :
                            scope.row.status === 4 ? '已完成'
                            :
                            scope.row.status === 5 ? '售后'
                            :
                            '取消'
                        }}
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleGoodsVisible(scope.row.goods_data)"
                                type="primary"
                                size="mini">订单商品
                        </el-button>
                        <el-button
                                type="success"
                                @click="handleShipVisible(scope.row.id)"
                                size="mini">发货
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>
        </div>

        <!--分页-->
        <div class="orderMillPage">
            <el-pagination
                    v-if="bookPageVisible"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

        <!--发货信息-->
        <el-dialog title="发货信息" :visible.sync="shipVisible">
            <el-form ref="shipForm" :model="shipData" :rules="shipRules">
                <el-form-item label="快递公司" :label-width="shipDialogLabelWidth" prop="express">
                    <el-input style="width: 500px" v-model="shipData.express" placeholder="请输入快递公司">
                    </el-input>
                </el-form-item>
                <el-form-item label="快递单号" :label-width="shipDialogLabelWidth" prop="expresssn">
                    <el-input style="width: 500px" v-model="shipData.expresssn" placeholder="请输入送快递单号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="shipVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleShip('shipForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--订单商品-->
        <el-dialog title="订单商品" :visible.sync="goodsVisible" width="1300px">
            <el-table
                    :data="goodsData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="title"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="thumbnail"
                        label="商品缩略图"
                        width="150">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 150px; height: 100px"
                                :src="scope.row.thumbnail"
                                fit="fill"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        width="400px"
                        align="center"
                        prop="sku"
                        label="商品规格">
                </el-table-column>
                <el-table-column
                        width="150"
                        align="center"
                        prop="quantity"
                        label="购买数量">
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: 'bookOrder',
        data(){
            return{
                list: [],
                total: 0,
                loading: false,
                order_sn: '',
                bookPageVisible: true,
                shipData: {},
                shipVisible: false,
                goodsVisible: false,
                goodsData: [],
                shipDialogLabelWidth: '150px',
                shipRules: {
                    express: [
                        { required: true, message: '请输入快递公司', trigger: 'blur' },
                    ],
                    expresssn: [
                        { required: true, message: '请输入快递单号', trigger: 'blur' }
                    ]
                },
            }
        },
        methods:{
            //初始化数据
            defaultData(page,order_sn){
                this.loading = true;
                this.$http.get('/store/order',{
                    params:{
                        token: localStorage.getItem('user_token'),
                        page: page,
                        order_sn: order_sn,
                        store_id: localStorage.getItem('user_store_id')
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                        if (this.total <= 10) {
                            this.bookPageVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                });
            },

            //搜索
            handelSearch(){
                this.order_sn = '';
                this.defaultData(1,this.order_sn);
            },

            //重置
            handleReset(){
                this.mobile = '';
                this.defaultData();
            },

            //打开发货对话框
            handleShipVisible(id){
                this.shipVisible = true;
                this.shipData.id = id;
            },

            //提交发货i信息
            handleShip(name){
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return false;
                    }

                    this.loading = true;
                    this.shipData.token = localStorage.getItem('user_token');
                    this.shipData.store_id = localStorage.getItem('user_store_id');
                    this.$http.post('/store/order/send', this.shipData).then(response => {
                        if (response.data.status === 'success'){
                            this.$message.success('发货成功');
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })
                });

            },

            //打开订单商品对话框
            handleGoodsVisible(value){
                this.goodsVisible = true;
                this.goodsData = value;
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .orderMillTable{
        margin-left: 50px;
    }
    .orderMillSearch{
        height: 80px;
        width: 1360px;
        margin-top: 40px;
    }
    .orderMillPage{
        margin-top: 24px;
        margin-left: 700px;
    }
</style>
